An Odometer chart using a background image

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.image.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="300" height="300">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var img = new RGraph.Drawing.Image({
            id: 'cvs',
            x: -4,
            y: 0,
            src: '../images/odometer-background.png'
        }).draw()
        
        var odo = new RGraph.Odometer({
            id: 'cvs',
            min: 0,
            max: 360,
            value: 56,
            options: {
                greenColor: 'rgba(0,0,0,0)',
                yellowColor: 'rgba(0,0,0,0)',
                redColor: 'rgba(0,0,0,0)',
                backgroundColor: 'rgba(0,0,0,0)',
                backgroundBorder: 'rgba(0,0,0,0)',
                backgroundLinesColor: 'rgba(0,0,0,0)',
                tickmarks: false,
                tickmarksBigColor: 'rgba(0,0,0,0)',
                textColor: 'rgba(0,0,0,0)',
                needleColor: '#ddd',
                needleTail: false,
                needleHead: false,
                needleThickness: 5
            }
        }).draw();
    };
</script>